import React from 'react';
import echarts from 'echarts';
import ReactEChart from './ReactEChart';

const getConfig = ({ color, serieName, fields, data }) => {
  const indicator = [];

  fields.forEach((field) => {
    indicator.push({ text: field, max: 100 });
  });

  return {
    title: {
      text: '',
    },
    legend: {
      data: [serieName],
      bottom: 0,
      selectedMode: false,
    },
    tooltip: {
      trigger: 'axis',
    },
    radar: [{
      shape: 'circle',
      indicator,
      name: {
        show: true,
        textStyle: {
          color: '#888',
        },
      },
      radius: 80,
      splitArea: {
        show: false,
      },
      splitNumber: 4,
      splitLine: {
        lineStyle: {
          color: '#e6e6e6',
        },
      },
      axisLine: {
        lineStyle: {
          color: '#ccd6eb',
        },
      },
    }],
    series: [{
      type: 'radar',
      name: serieName,
      tooltip: {
        trigger: 'item',
      },
      itemStyle: {
        normal: {
          color,
        },
      },
      areaStyle: {
        normal: {
          opacity: 0.75,
        },
      },
      data: [data],
    }],
  };
};

const RadarChart = (props) => {
  const config = getConfig(props);
  const height = props.height || 300;
  return (
    <div style={{ height }}>
      <ReactEChart config={config} />
    </div>
  );
};

RadarChart.propTypes = {
};

export default RadarChart;
